<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布工具模块 - Phoenix Editor</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .card-hover {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800">
    <!-- 导航栏 -->
    <header id="navbar" class="fixed w-full top-0 z-50 bg-white/90 backdrop-blur-sm shadow-sm transition-all duration-300">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <a href="../index.html" class="flex items-center gap-2">
                        <div class="w-8 h-8 bg-primary rounded-md flex items-center justify-center">
                            <i class="fa fa-code text-white"></i>
                        </div>
                        <span class="text-xl font-bold text-primary">Phoenix Editor</span>
                    </a>
                </div>
                
                <!-- 桌面导航 -->
                <nav class="hidden md:flex space-x-8">
                    <a href="../index.html#features" class="text-gray-600 hover:text-primary transition-colors">特性</a>
                    <a href="../index.html#installation" class="text-gray-600 hover:text-primary transition-colors">安装</a>
                    <a href="../index.html#usage" class="text-gray-600 hover:text-primary transition-colors">使用方法</a>
                    <a href="../index.html#modules" class="text-gray-600 hover:text-primary transition-colors">模块</a>
                    <a href="../index.html#faq" class="text-gray-600 hover:text-primary transition-colors">问答</a>
                </nav>
                
                <div class="hidden md:flex items-center gap-4">
                    <a href="../index.html#download" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-md transition-colors">
                        下载
                    </a>
                    <a href="https://gitee.com/creative-and-dream/phoenix-editor" target="_blank" class="bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded-md transition-colors flex items-center gap-2">
                        <i class="fa fa-github"></i>
                        <span>Gitee</span>
                    </a>
                </div>
                
                <!-- 移动端菜单按钮 -->
                <button id="menu-toggle" class="md:hidden text-gray-600 hover:text-primary">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
            <div class="container mx-auto px-4 py-3 space-y-3">
                <a href="../index.html#features" class="block text-gray-600 hover:text-primary transition-colors py-2">特性</a>
                <a href="../index.html#installation" class="block text-gray-600 hover:text-primary transition-colors py-2">安装</a>
                <a href="../index.html#usage" class="block text-gray-600 hover:text-primary transition-colors py-2">使用方法</a>
                <a href="../index.html#modules" class="block text-gray-600 hover:text-primary transition-colors py-2">模块</a>
                <a href="../index.html#faq" class="block text-gray-600 hover:text-primary transition-colors py-2">问答</a>
                <div class="flex flex-col gap-2 pt-2">
                    <a href="../index.html#download" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-md transition-colors text-center">
                        下载
                    </a>
                    <a href="https://gitee.com/creative-and-dream/phoenix-editor" target="_blank" class="bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded-md transition-colors flex items-center justify-center gap-2">
                        <i class="fa fa-github"></i>
                        <span>Gitee</span>
                    </a>
                </div>
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="pt-16">
        <!-- 模块标题区域 -->
        <section class="bg-gradient-to-br from-purple-500 to-indigo-600 text-white py-20">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex flex-col md:flex-row items-center gap-8">
                    <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mb-4 md:mb-0">
                        <i class="fa fa-cogs text-white text-3xl"></i>
                    </div>
                    <div>
                        <h1 class="text-3xl md:text-4xl font-bold mb-2">发布工具模块</h1>
                        <p class="text-lg text-white/90">简化项目打包与发布流程，提高开发效率</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 模块概述 -->
        <section class="py-16 bg-white">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="max-w-3xl mx-auto">
                    <h2 class="text-2xl md:text-3xl font-bold mb-6 text-center">模块概述</h2>
                    <p class="text-gray-600 text-lg mb-6">
                        发布工具模块是Phoenix Editor的扩展插件，专为简化项目打包和发布流程而设计。无论是学生作业提交、项目演示还是小型应用发布，该模块都能帮助您快速整理项目文件并生成规范的发布包。
                    </p>
                    <div class="bg-purple-50 border-l-4 border-primary p-4 rounded">
                        <p class="text-gray-700 italic">
                            <i class="fa fa-lightbulb-o text-primary mr-2"></i>
                            特别适合教育场景，帮助学生规范项目提交格式，让教师更轻松地查看和评估作业。
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 核心功能 -->
        <section class="py-16 bg-gray-50">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <h2 class="text-2xl md:text-3xl font-bold mb-12 text-center">核心功能</h2>
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto">
                    <!-- 功能卡片 1 -->
                    <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
                        <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                            <i class="fa fa-file-zip-o text-primary text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-3">自动打包 ZIP</h3>
                        <p class="text-gray-600">
                            一键将项目文件打包为 ZIP 格式，支持自定义包含/排除文件类型，自动过滤临时文件和缓存目录。
                        </p>
                    </div>
                    
                    <!-- 功能卡片 2 -->
                    <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
                        <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                            <i class="fa fa-sitemap text-primary text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-3">项目结构树生成</h3>
                        <p class="text-gray-600">
                            自动分析项目文件结构，生成可视化的树形结构文档，帮助理解项目组织和文件关系。
                        </p>
                    </div>
                    
                    <!-- 功能卡片 3 -->
                    <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
                        <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                            <i class="fa fa-file-text text-primary text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-3">自动生成说明文档</h3>
                        <p class="text-gray-600">
                            根据项目内容自动生成基本说明文档，包括项目概述、文件说明和使用方法等。
                        </p>
                    </div>
                    
                    <!-- 功能卡片 4 -->
                    <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
                        <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                            <i class="fa fa-check-square-o text-primary text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-3">发布检查清单</h3>
                        <p class="text-gray-600">
                            提供项目发布前的检查清单，确保关键文件和配置不被遗漏，提高发布质量。
                        </p>
                    </div>
                    
                    <!-- 功能卡片 5 -->
                    <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
                        <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                            <i class="fa fa-sliders text-primary text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-3">自定义发布模板</h3>
                        <p class="text-gray-600">
                            支持创建和保存自定义发布模板，满足不同场景下的发布需求，提高重复发布效率。
                        </p>
                    </div>
                    
                    <!-- 功能卡片 6 -->
                    <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
                        <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                            <i class="fa fa-history text-primary text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-3">发布历史记录</h3>
                        <p class="text-gray-600">
                            记录每次发布的版本、时间和内容摘要，方便追踪项目发布历史和版本演进。
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 使用指南 -->
        <section class="py-16 bg-white">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <h2 class="text-2xl md:text-3xl font-bold mb-12 text-center">使用指南</h2>
                
                <div class="max-w-3xl mx-auto">
                    <div class="space-y-10">
                        <!-- 步骤 1 -->
                        <div class="flex">
                            <div class="mr-6 flex-shrink-0">
                                <div class="w-10 h-10 bg-primary text-white rounded-full flex items-center justify-center font-bold">1</div>
                            </div>
                            <div>
                                <h3 class="text-xl font-semibold mb-2">安装发布工具模块</h3>
                                <p class="text-gray-600">
                                    下载代码仓库中的 <code>tools</code> 文件夹下的所有文件，并复制到经过修改后的项目中。
                                </p>
                            </div>
                        </div>
                        
                        <!-- 步骤 2 -->
                        <div class="flex">
                            <div class="mr-6 flex-shrink-0">
                                <div class="w-10 h-10 bg-primary text-white rounded-full flex items-center justify-center font-bold">2</div>
                            </div>
                            <div>
                                <h3 class="text-xl font-semibold mb-2">运行工具</h3>
                                <p class="text-gray-600">
                                    运行 <code>build-chain</code> 目录下的 build 选项。
                                </p>
                            </div>
                        </div>
                        
                        <!-- 步骤 3 -->
                        <div class="flex">
                            <div class="mr-6 flex-shrink-0">
                                <div class="w-10 h-10 bg-primary text-white rounded-full flex items-center justify-center font-bold">3</div>
                            </div>
                            <div>
                                <h3 class="text-xl font-semibold mb-2">运行工具</h3>
                                <p class="text-gray-600 mb-3">
                                    点击菜单栏的"工具" -> "发布工具" -> "配置"，或使用快捷键<code class="bg-gray-100 px-1 py-0.5 rounded">Ctrl+Shift+P</code>打开发布配置面板：
                                </p>
                                <ul class="list-disc pl-5 space-y-1 text-gray-600">
                                    <li>选择自动发布的模式</li>
                                    <li>创建配置文件，包含具体的需要的文件夹和文件以及对于分发版本的命名</li>
                                    <li>等待打包完成（该过程全自动）</li>
                                    <li>测试软件</li>
                                </ul>
                            </div>
                        </div>
                        
                        <!-- 步骤 4 -->
                        <div class="flex">
                            <div class="mr-6 flex-shrink-0">
                                <div class="w-10 h-10 bg-primary text-white rounded-full flex items-center justify-center font-bold">4</div>
                            </div>
                            <div>
                                <h3 class="text-xl font-semibold mb-2">上传</h3>
                                <p class="text-gray-600 mb-3">
                                    配置完成后，在 <code>tools/released/</code> 可以查看打包的最终 zip 文件，这时就可以上传到你的代码仓库中了。
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 安装模块 -->
        <section class="py-16 bg-gradient-to-br from-primary/90 to-primary text-white">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
                <h2 class="text-2xl md:text-3xl font-bold mb-6">安装发布工具模块</h2>
                <p class="max-w-2xl mx-auto mb-8 text-lg text-white/90">
                    只需几步，即可为您的Phoenix Editor添加强大的发布功能，提高项目管理效率。
                </p>
                <a href="../index.html#download" class="inline-block bg-white text-primary font-medium px-8 py-3 rounded-md hover:bg-white/90 transition-colors text-lg">
                    下载Phoenix Editor
                </a>
                <p class="mt-4 text-white/80">
                    已安装Phoenix Editor？在编辑器内的扩展中心搜索"发布工具"进行安装
                </p>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-900 text-white py-12">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center mb-8">
                <div class="flex items-center gap-2 mb-6 md:mb-0">
                    <div class="w-8 h-8 bg-primary rounded-md flex items-center justify-center">
                        <i class="fa fa-code text-white"></i>
                    </div>
                    <span class="text-xl font-bold text-white">Phoenix Editor</span>
                </div>
                
                <div class="flex gap-6">
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-github text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-twitter text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-envelope text-xl"></i>
                    </a>
                </div>
            </div>
            
            <div class="border-t border-gray-800 pt-8">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <p class="text-gray-400 text-sm mb-4 md:mb-0">
                        &copy; 2023 Phoenix Editor. 保留所有权利。
                    </p>
                    <div class="flex gap-6 text-sm text-gray-400">
                        <a href="#" class="hover:text-white transition-colors">隐私政策</a>
                        <a href="#" class="hover:text-white transition-colors">使用条款</a>
                        <a href="#" class="hover:text-white transition-colors">联系我们</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 移动端菜单切换
        const menuToggle = document.getElementById('menu-toggle');
        const mobileMenu = document.getElementById('mobile-menu');
        
        menuToggle.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });
        
        // 导航栏滚动效果
        const navbar = document.getElementById('navbar');
        
        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                navbar.classList.add('shadow-md');
                navbar.classList.remove('bg-white/90');
                navbar.classList.add('bg-white');
            } else {
                navbar.classList.remove('shadow-md');
                navbar.classList.add('bg-white/90');
                navbar.classList.remove('bg-white');
            }
        });
        
        // 平滑滚动 - 菜单栏跳转功能
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    // 计算目标位置，考虑固定导航栏的高度
                    const navbarHeight = document.getElementById('navbar').offsetHeight;
                    const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navbarHeight;
                    
                    // 平滑滚动到目标位置
                    window.scrollTo({
                        top: targetPosition,
                        behavior: 'smooth'
                    });
                    
                    // 关闭移动端菜单（如果打开）
                    if (!mobileMenu.classList.contains('hidden')) {
                        mobileMenu.classList.add('hidden');
                    }
                }
            });
        });
    </script>
</body>
</html>
